<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>控制台</title>
</head>
<body>
<div id="sysInfo">
操作系统：${sysInfo.osName}<br/>
操作系统版本：${sysInfo.osVersion}<br/>
操作系统构架：${sysInfo.osArch}<br/>
JDK版本:${sysInfo.java}<br/>
总内存：${sysInfo.memory}<br/>
剩余内存：${sysInfo.freeMemory}<br/>
使用内存：${sysInfo.useMemory}<br/>
<div id="memory" style="width: 1000px;height:1000px;"></div>
可用CPU线程数：${sysInfo.cpu}
</div>
<script src="${rc.contextPath}/admin/statics/libs/jquery.min.js"></script>
<script src="${rc.contextPath}/admin/statics/libs/echarts.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        setInterval(getSysInfo,1000);
        function getSysInfo(){
            $.ajax({
                type : "GET",
                async : false, //同步请求
                url : "getSysInfo",
                timeout : 1000,
                success:function(dates){
                    $("#sysInfo").html(dates.sysInfo);//要刷新的div
                }
            });
        }
    });
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('memory'));
    // 指定图表的配置项和数据
    option = {
        backgroundColor: '#1b1b1b',
        tooltip : {
            formatter: "{a} <br/>{c} {b}"
        },
        toolbox: {
            show : true,
            feature : {
                mark : {show: true},
                restore : {show: true},
                saveAsImage : {show: true}
            }
        },
        series: [
            {
                name:'内存使用率',
                type:'gauge',
                min:0,
                max:100,
                splitNumber:10,
                radius: '50%',
                axisLine: {            // 坐标轴线
                    lineStyle: {       // 属性lineStyle控制线条样式
                        color: [[0.09, 'lime'],[0.82, '#1e90ff'],[1, '#ff4500']],
                        width: 3,
                        shadowColor : '#fff', //默认透明
                        shadowBlur: 10
                    }
                },
                axisLabel: {            // 坐标轴小标记
                    textStyle: {       // 属性lineStyle控制线条样式
                        fontWeight: 'bolder',
                        color: '#fff',
                        shadowColor : '#fff', //默认透明
                        shadowBlur: 10
                    }
                },
                axisTick: {            // 坐标轴小标记
                    length :15,        // 属性length控制线长
                    lineStyle: {       // 属性lineStyle控制线条样式
                        color: 'auto',
                        shadowColor : '#fff', //默认透明
                        shadowBlur: 10
                    }
                },
                splitLine: {           // 分隔线
                    length :25,         // 属性length控制线长
                    lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                        width:3,
                        color: '#fff',
                        shadowColor : '#fff', //默认透明
                        shadowBlur: 10
                    }
                },
                pointer: {           // 分隔线
                    shadowColor : '#fff', //默认透明
                    shadowBlur: 5
                },
                title : {
                    textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                        fontWeight: 'bolder',
                        fontSize: 20,
                        fontStyle: 'italic',
                        color: '#fff',
                        shadowColor : '#fff', //默认透明
                        shadowBlur: 10
                    }
                },
                detail : {
                    backgroundColor: 'rgba(30,144,255,0.8)',
                    borderWidth: 1,
                    borderColor: '#fff',
                    shadowColor : '#fff', //默认透明
                    shadowBlur: 5,
                    offsetCenter: [0, '50%'],       // x, y，单位px
                    textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                        fontWeight: 'bolder',
                        color: '#fff'
                    }
                },
                data:[{value: (${freeMemory}/${memory}).toFixed(2) - 0, name: 'MB'}]
            },
        ]
    };
    setInterval(function () {
        option.series[0].data[0].value = (${freeMemory}/${memory}).toFixed(2) - 0;
        myChart.setOption(option);
    },2000);
</script>
</body>
</html>